<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" title="新增商户支付信息" width="550px"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" :label-width="formLabelWidth" :rules="rules">
            <el-form-item label="商户id" prop="merchant_id">
                <el-input v-model="dialogForm.merchant_id" />
            </el-form-item>
            <el-form-item label="支付通道id" prop="channel_id">
                <el-input v-model="dialogForm.channel_id" />
            </el-form-item>
            <el-form-item label="法币名称" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.currency" />
            </el-form-item>
            <el-form-item label="通道费率" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.fee_rate" type="number" />
            </el-form-item>
            <el-form-item label="单笔本币固定费用" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.fixed_fee"  type="number"/>
            </el-form-item>
            <el-form-item label="单笔美元固定费用" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.fixed_usd_fee" type="number" />
            </el-form-item>
            <el-form-item label="汇差费率" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.diff_rate" type="number" />
            </el-form-item>
            <el-form-item label="单笔最小金额" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.min_amount"  type="number"/>
            </el-form-item>
            <el-form-item label="单笔最大金额" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.max_amount" type="number" />
            </el-form-item>
            <el-form-item label="单日最大金额" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.daily_max_amount" type="number" />
            </el-form-item>
            <el-form-item label="入账天数" :label-width="formLabelWidth">
                <el-input v-model="dialogForm.deposit_freeze_days" type="number" />
            </el-form-item>
            <el-form-item label="是否生效" prop="is_valid">
                <el-select v-model="dialogForm.is_valid" placeholder="是否生效">
                    <el-option label="未生效" :value="0" />
                    <el-option label="已生效" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否允许退款" prop="is_refund">
                <el-select v-model="dialogForm.is_refund" placeholder="是否允许退款">
                    <el-option label="否" :value="0" />
                    <el-option label="是" :value="1" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false,
    },
    dialogForm: {
        type: Object,
        default: {
            merchant_id: "",
            channel_id: "",
            currency: "",
            fee_rate: "",
            fixed_fee: "",
            fixed_usd_fee: "",
            diff_rate: "",
            min_amount: "",
            max_amount: "",
            daily_max_amount: "",
            deposit_freeze_days: "",
            is_valid: "",
            is_refund: ""
        },
    },
    btnLoading: {
        type: Boolean,
        default: false,
    },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "220px";
// 校验
const rules = {
    merchant_id: [{ required: true, message: "请输入商户id", trigger: "blur" }],
    fee_rate: [{ required: true, message: "请输入支付通道手续费率", trigger: "blur" }],
    channel_id: [{ required: true, message: "请输入支付渠道id", trigger: "blur" },],
    currency: [{ required: true, message: "请输入币种", trigger: "blur" },],
    fixed_fee: [{ required: true, message: "请输入单笔手续费（美金）", trigger: "blur" },],
    min_amount: [{ required: true, message: "请输入单笔最小支付金额", trigger: "blur" },],
    max_amount: [{ required: true, message: "请输入单笔最大支付金额", trigger: "blur" },],
    deposit_freeze_days: [{ required: true, message: "请输入资金到账天数", trigger: "blur" },]
};
// 提交
const submit = (dialogForm) => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                const param = Object.assign({}, dialogForm);
                // param.is_active = param.is_deposit ? 1 : 0;
                emits("submitForm", param);
            } catch (error) {
                console.log(error);
            }
        })
        .catch((error) => {
            console.log(error);
        });
};
</script>
  